<template>
  <div class="calendar-container">
    <van-nav-bar
      :title="header"
      left-arrow
      @click-left="onClickLeft"
      right-text="本月"
      @click-right="clickToday"
    />
    <div class="calendar-content">
      <Calendar
        ref="Calendar"
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
        :markDate=arr
      >
      </Calendar>
    </div>
    <div class="calendar-statistics">
      <h2 class="calendar-statistics-title">当月统计</h2>
      <div class="calendar-statistics-box">
        <ul class="calendar-statistics-ul">
          <li>
            <span>
              订单笔数<br/>
              <i v-text="resData.orderNumber"></i>
            </span>
            <span>
              订单金额<br/>
              <i v-text="resData.orderMoney"></i>
            </span>
          </li>
          <li>
            <span>
              手续费<br/>
              <i v-text="resData.serviceCharge"></i>
            </span>
            <span>
              实到金额<br/>
              <i v-text="resData.relMoney"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import Calendar from 'vue-calendar-component';
  import {
    NavBar
  } from 'vant';
  export default {
    components: {
      Calendar,
      [NavBar.name]: NavBar
    },
    data() {
      return {
        header: '对账',
        arr: ['2018/4/1', '2018/4/3', '2018/4/4', '2018/4/5', '2018/4/10', '2018/4/11', '2018/4/18'],
        resData: {
          orderNumber: 32.12,
          orderMoney: 6200.00,
          serviceCharge: 10.00,
          relMoney: 619.00
        }
      };
    },
    methods: {
      clickDay(data) {
        console.log(data); // 选中某天
        this.$router.push({ path: 'statement', query: { date: data }});
      },
      changeDate(data) {
        const year = data.substring(0, 4);
        const month = data.split('/')[1];
        console.log(year + '|' + month); // 左右点击切换月份
        const newArr = [];
        for (let i = 0; i < 30; i++) {
          newArr.push(year + '-' + month + '-' + 2 * i);
        }
        console.log(newArr);
        this.arr = newArr;
      },
      // 跳到了本月
      clickToday() {
        const day = new Date();
        day.setTime(day.getTime());
        const today = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate();
        // console.log(today);
        this.$refs.Calendar.ChoseMonth(today, false);
      },
      onClickLeft() {
        this.$router.push('reconciliation');
      }
    }

  };
</script>

<style lang="less" scoped>
  .calendar-container {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    .calendar-content {
      /deep/ .wh_content_all {
        background-color: #fff;
      }
      /deep/ .wh_top_tag {
        color: rgba(29, 29, 38, .5);
      }
      /deep/ .wh_content_li {
        color: #000;
        font-size: 24px;
        font-weight: bold;
      }
      /deep/.wh_jiantou2 {
        width: .12rem;
        height: .12rem;
        border-top: 2px solid #ccc;
        border-right: 2px solid #ccc;
      }
      /deep/.wh_jiantou1 {
        width: .12rem;
        height: .12rem;
        border-top: 2px solid #ccc;
        border-left: 2px solid #ccc;
      }
      /deep/.wh_item_date {
        color: #1D1D26;
        width: .6rem;
        height: .6rem;
        line-height: .8rem;
      }
      /deep/.wh_item_date.wh_chose_day {
        background-color: rgba(29, 29, 38, 0.2);
      }
      /deep/.wh_content_item {
        height: .90rem;
      }
      /deep/.wh_content_item > .wh_isMark {
        background: rgba(255, 51, 102, 0.81);
        color: #fff;
      }
      /deep/.wh_content_item .wh_isToday {
        background: rgba(47, 102, 243, 0.7);
        color: #fff;
      }
      /deep/.wh_top_changge li {
        height: 1.2rem;
      }
      /deep/.wh_content_item .wh_other_dayhide {
        color: rgba(29, 29, 38, .3);
      }
      /deep/.wh_top_changge .wh_content_li {
        -webkit-box-flex: 2;
        -webkit-flex: 2;
        flex: 2;
      }
      /deep/.wh_top_tag {
        font-size: 13px;
      }
    }
  }
  .calendar-statistics {
    background-color: #fff;
    padding: .15rem .3rem .4rem .3rem;
    &-title {
      font-size: 20px;
      color: #000;
      font-weight: normal;
      margin-left: .26rem;
    }
    &-box {
      padding: .52rem;
      background-color: #2F66F3;
      border-radius: .12rem;
      margin-top: .26rem;
    }
    &-ul {
      font-size: 12px;
      color: #6B95FF;
      li {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        &:first-child {
          margin-bottom: .2rem;
        }
        span {
          flex: 1;
          height: 1rem;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
      }
      i {
        font-size: 20px;
        color: #fff;
        font-style: normal;
        font-weight: bold;
      }
    }
  }
</style>
